// src/components/createAccount/ConfirmCreateAccountModal.tsx

import { useState, useEffect } from 'react';
import { FaCheck, FaTimes, FaUser, FaEnvelope, FaLock } from 'react-icons/fa';

interface ConfirmCreateAccountModalProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  formData: {
    firstName: string;
    lastName: string;
    email: string;
    password: string;
  };
}

const ConfirmCreateAccountModal: React.FC<ConfirmCreateAccountModalProps> = ({ open, onClose, onConfirm, formData }) => {
  const [isSmallScreen, setIsSmallScreen] = useState(false);

  useEffect(() => {
    const checkScreenSize = () => setIsSmallScreen(window.innerWidth < 640);
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div className={`bg-white dark:bg-slate-900 rounded-3xl shadow-2xl w-full border border-gray-100 dark:border-slate-700 ${isSmallScreen ? 'max-w-xs mx-4 p-6' : 'max-w-md mx-4 p-8'}`}>
        <div className="flex flex-col items-center mb-6">
          <div className="w-16 h-16 mb-4 bg-blue-600 dark:bg-cyan-700 rounded-2xl flex items-center justify-center shadow-lg">
            <FaCheck className="w-8 h-8 text-white" />
          </div>
          <h2 className={`font-bold text-gray-900 dark:text-white mb-2 ${isSmallScreen ? 'text-lg' : 'text-2xl'}`}>
            Confirm Account Creation
          </h2>
          <p className="text-gray-600 dark:text-gray-300 text-sm text-center leading-relaxed">
            Please review the information below before creating your account.
          </p>
        </div>

        <div className="mb-6 space-y-3">
          <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-600">
            <FaUser className="w-4 h-4 text-gray-500 dark:text-gray-400" />
            <div>
              <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">Name</span>
              <p className="text-sm text-gray-900 dark:text-white font-semibold">{formData.firstName} {formData.lastName}</p>
            </div>
          </div>

          <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-600">
            <FaEnvelope className="w-4 h-4 text-gray-500 dark:text-gray-400" />
            <div>
              <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">Email</span>
              <p className="text-sm text-gray-900 dark:text-white font-semibold">{formData.email}</p>
            </div>
          </div>

          <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-600">
            <FaLock className="w-4 h-4 text-gray-500 dark:text-gray-400" />
            <div>
              <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">Password</span>
              <p className="text-sm text-gray-900 dark:text-white font-semibold">••••••••</p>
            </div>
          </div>
        </div>

        <div className="flex gap-3">
          <button
            onClick={onClose}
            className="flex-1 px-4 py-3 rounded-xl bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-200 font-semibold transition-all duration-200 ease-in-out hover:shadow-md flex items-center justify-center gap-2"
          >
            <FaTimes className="w-4 h-4" />
            Cancel
          </button>
          <button
            onClick={onConfirm}
            className="flex-1 px-4 py-3 rounded-xl bg-blue-600 dark:bg-cyan-700 text-white font-semibold hover:bg-blue-700 dark:hover:bg-cyan-800 shadow-lg hover:shadow-xl transition-all duration-200 ease-in-out flex items-center justify-center gap-2"
          >
            <FaCheck className="w-4 h-4" />
            Confirm
          </button>
        </div>
      </div>
    </div>
  );
};

export default ConfirmCreateAccountModal; 